<%--
  Created by IntelliJ IDEA.
  User: gulu
  Date: 2024-03-27
  Time: 19:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<%--    <base href="<%=basePath%>">--%>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    #wai {
        width: 500px;
        height: 250px;
        /* border: 1px solid red; */
        margin: 10% auto;
    }

    .top_hr {
        height: 2px;
        background: black;
    }

    #captcha_login {
        display: none;
    }

    #register {
        display: none;
    }

    .buttom {
        width: 500px;
        text-align: center;
    }

    p {
        display: inline
    }

    input {
        float: right;
        width: 300px;
        height: 22px;
        margin-right: 30px;
        border-radius: 5px;
        border: 1px solid gainsboro;
    }

    .title {
        font-size: 30px;
    }

    .buttom button {
        width: 80px;
        height: 35px;
    }
</style>
<body>
<div id="wai">
<%--    密码登录页--%>
    <div id="pwd_login">
        <p class="title">密码登录</p>
        <hr class="top_hr"/>
        <p>登录邮箱：</p>
        <input type="email" name="user_email" id="pwd_login_user_email" value="" placeholder="avsd@163.com"/>
        <hr/>
        <p>登录密码：</p>
        <input id="pwd2" type="password" name="user_password" placeholder="输入登录密码" value=""/><a href="#"><span
            class="eye-icon" onclick="togglePasswordVisibility()">👁️</span></a>
        <hr/>
        <img id="captcha_picture" src="#" alt="验证码"/>&nbsp;&nbsp;<a href="#" onclick="change_captcha()">看不清</a>
        <input type="text" name="captcha_picture" id="pwd_login_captcha_picture" value="" placeholder="输入图片验证码"/>
        <hr/>
        <div class="buttom">
            <button id="pwd_login_but" onclick="pwdLogin()">登录</button>
            <br/>
            <a href="#" onclick="ShowRegister()">去注册</a>&nbsp;&nbsp;<a href="#" onclick="ShowCaptchaLogin()">免密登录</a>
        </div>
        <hr class="top_hr"/>
    </div>
<%--    验证码登录页--%>
    <div id="captcha_login">
        <p class="title">免密登录</p>
        <hr class="top_hr"/>
        <p>登录邮箱：</p>
        <input type="email" name="user_email" id="captcha_login_user_email" value="" placeholder="avsd@123"/>
        <hr/>
        <p>邮箱验证码：</p>
        <input type="text" name="captcha_email" id="captcha_login_captcha_email" placeholder="输入邮箱验证码">
        <hr/>
        <button id="getEmailCaptcha" onclick="sendEmailCaptchaLogin()">获取邮箱验证码</button><p id="login_captcha_msg"></p>
        <hr/>
        <div class="buttom">
            <button id="captcha_login_but" onclick="captchaLogin()">登录</button>
            <br/>
            <a href="#" onclick="ShowRegister()">去注册</a>&nbsp;&nbsp;<a href="#" onclick="ShowPwdLogin()">去登录</a>
        </div>
        <hr class="top_hr"/>
    </div>
<%--    注册页--%>
    <div id="register">
        <p class="title">用户注册</p>
        <hr class="top_hr"/>
        <p>昵称：</p>
        <input type="text" name="user_name" id="register_user_name" placeholder="用户昵称" value=""/>
        <hr/>
        <p>注册邮箱：</p>
        <input type="email" name="user_email" id="register_user_email" value="" placeholder="avsd@123"/>
        <hr/>
        <p>密码：</p>
        <input id="pwd1" type="password" name="user_password" placeholder="输入登录密码" value=""/><a href="#"> <span class="eye-icon" onclick="togglePasswordVisibility()">👁️</span></a>
        <hr/>
        <input type="text" name="captcha_email" id="register_captcha_email" value="" placeholder="邮箱验证码"/>
        <button id="getEmailCaptchaRegister"
                onclick="sendEmailCaptchaRegister()">获取邮箱验证码
        </button>
        <hr/>
        <div class="buttom">
            <button id="register_but" onclick="register()">注册</button>
            <br/>
            <a href="#" onclick="ShowPwdLogin()">去登录</a>&nbsp;&nbsp;<a href="#" onclick="ShowCaptchaLogin()">免密登录</a>
        </div>
        <hr class="top_hr"/>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded',change_captcha);
    //密码登录
    function pwdLogin(){
        var email_e=document.getElementById("pwd_login_user_email");
        var pwd_e=document.getElementById("pwd2");
        var captcha_e=document.getElementById("pwd_login_captcha_picture");
        var email=email_e.value;
        var pwd=pwd_e.value;
        var captcha=captcha_e.value;
        if (email == null || pwd == null || captcha == null || email === "" || pwd === "" || captcha === "") {
            alert("有未完成的表单填写，请重新填写");
        } else {
            var url = "user/pwdLogin"; // 替换为你要发送POST请求的URL
            var jsonData = JSON.stringify({ "user_email": email, "user_password":pwd,"captcha_picture":captcha }); // 将JavaScript对象转换为JSON字符串
            console.log(jsonData);
            email_e.value=null;
            pwd_e.value=null;
            captcha_e.value=null;
            doPostJson(url,jsonData );
        }
    }
    //验证码登录
    function captchaLogin(){
        var email_e=document.getElementById("captcha_login_user_email");
        var captcha_e=document.getElementById("captcha_login_captcha_email");

        var email=email_e.value;
        var captcha=captcha_e.value;
        if (email == null || captcha == null || email === "" || captcha === "") {
            alert("有未完成的表单填写，请重新填写");
        } else {
            var url = "user/captchaLogin"; // 替换为你要发送POST请求的URL
            var jsonData = JSON.stringify({ "user_email": email,"captcha_email":captcha }); // 将JavaScript对象转换为JSON字符串
            console.log(jsonData);
            email_e.value=null;
            captcha_e.value=null;
            doPostJson(url,jsonData );
        }
    }
    //注册
    function register(){
        var email_e=document.getElementById("register_user_email");
        var pwd_e=document.getElementById("pwd1");
        var name_e=document.getElementById("register_user_name");
        var captcha_email_e=document.getElementById("register_captcha_email");

        var email=email_e.value;
        var pwd=pwd_e.value;
        var name=name_e.value;
        var captcha_email=captcha_email_e.value;

        if (email == null || pwd == null || name == null || captcha_email == null || email == "" || pwd == "" || name == "" || captcha_email == "" ) {
            alert("有未完成的表单填写，请重新填写");
        } else {
            var url = "user/register"; // 替换为你要发送POST请求的URL
            var jsonData = JSON.stringify({ "user_email": email, "user_password":pwd,"user_name":name,"captcha_email":captcha_email }); // 将JavaScript对象转换为JSON字符串
            console.log(jsonData);
            email_e.value=null;
            pwd_e.value=null;
            name_e.value=null;
            captcha_email_e.value=null;
            doPostJson(url,jsonData );

        }
    }

    //免密登录时发送邮件的按钮设置
    function sendEmailCaptchaLogin() {
        var user_email=document.getElementById("captcha_login_user_email").value;
        if(user_email===null || user_email===""){
            alert("未输入邮箱");
        }else {
            var url = "user/get_email_captcha_login"; // 替换为你要发送POST请求的URL
            var jsonData = JSON.stringify({ "user_email": user_email }); // 将JavaScript对象转换为JSON字符串
            console.log(jsonData);
            doPostJson(url,jsonData );

            var InterValObj;
            var getEmailCaptchaButton = document.getElementById("getEmailCaptcha");
            getEmailCaptchaButton.disabled = true;    // 设置按钮禁止使用，开始计时
            var curCount = 6; // 将curCount定义在sendEmailCaptchaLogin的作用域内
            getEmailCaptchaButton.textContent = "请在" + curCount + "秒内输入验证码";
            // 启动计时器，1秒执行一次SetRemainTime的闭包函数
            InterValObj = setInterval(function () {SetRemainTime(getEmailCaptchaButton, curCount);}, 1000);
            // 定义一个内部函数来更新剩余时间
            function SetRemainTime() {
                if (curCount === 0) {
                    clearInterval(InterValObj); // 停止计时器
                    getEmailCaptchaButton.disabled = false; // 启用按钮
                    getEmailCaptchaButton.textContent = "重新发送验证码";
                } else {
                    curCount--;
                    getEmailCaptchaButton.textContent = "请在" + curCount + "秒内输入验证码";
                }
            }
        }
    }
    //注册时发送邮件的按钮设置
    function sendEmailCaptchaRegister() {
        var user_email=document.getElementById("register_user_email").value;
        if(user_email===null || user_email===""){
            alert("未输入邮箱");
        }else {
            var url = "user/get_email_captcha_register"; // 替换为你要发送POST请求的URL
            var jsonData = JSON.stringify({ "user_email": user_email }); // 将JavaScript对象转换为JSON字符串
            console.log(jsonData);
            doPostJson(url,jsonData );

            var InterValObj;
            var getEmailCaptchaButton = document.getElementById("getEmailCaptchaRegister");
            getEmailCaptchaButton.disabled = true;    // 设置按钮禁止使用，开始计时
            var curCount = 6; // 将curCount定义在sendEmailCaptcha的作用域内
            getEmailCaptchaButton.textContent = "请在" + curCount + "秒内输入验证码";
            // 启动计时器，1秒执行一次SetRemainTime的闭包函数
            InterValObj = setInterval(function () {SetRemainTime(getEmailCaptchaButton, curCount);}, 1000);
            // 定义一个内部函数来更新剩余时间
            function SetRemainTime() {
                if (curCount === 0) {
                    clearInterval(InterValObj); // 停止计时器
                    getEmailCaptchaButton.disabled = false; // 启用按钮
                    getEmailCaptchaButton.textContent = "重新发送验证码";
                } else {
                    curCount--;
                    getEmailCaptchaButton.textContent = "请在" + curCount + "秒内输入验证码";
                }
            }
        }
    }
    //设置图片验证码
    function change_captcha(){
        var img=document.getElementById("captcha_picture");
        var timestamp = Date.now(); // 获取当前时间戳（毫秒
        img.src="<%=basePath%>captcha?id="+timestamp;
    }

    //发送post请求，json格式数据
    function doPostJson(url, JsonData) {
        var xhr = new XMLHttpRequest();
        var bsesurl="<%=basePath%>";
        var url=bsesurl.concat(url);
        xhr.open("POST",url, false); // 设置请求方法、URL和异步标志
        // 对于发送JSON数据，你需要这样做：
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        // var jsonData = JSON.stringify({ key1: "value1", key2: "value2" }); // 将JavaScript对象转换为JSON字符串
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 请求成功完成，处理响应
                var response = xhr.responseText;
                console.log(response);
                // 解析JSON字符串为JavaScript对象
                var user = JSON.parse(response);
                // 访问对象属性
                alert(user.msg);
                if (user.msg=="登录成功"){
                    console.log("去主页")
                    document.location.href="<%=basePath%>content_page";
                }
            } else if (xhr.status != 200) {
                // 请求完成，但服务器返回了错误状态码
                console.error("Error: " + xhr.status + " " + xhr.statusText);
            }
        };
        // 发送请求
        xhr.send(JsonData); // 如果发送JSON数据，使用 xhr.send(jsonData);
    }
    //发送post请求，表单格式数据
    function doPostForm(url, FormData) {
        var xhr = new XMLHttpRequest();
        var url="<%=basePath%>"+url;
        xhr.open("POST", url, true); // 设置请求方法、URL和异步标志
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 请求成功完成，处理响应
                var response = xhr.responseText;
                // console.log(response);
            } else if (xhr.status != 200) {
                // 请求完成，但服务器返回了错误状态码
                console.error("Error: " + xhr.status + " " + xhr.statusText);
            }
        };
        // 发送请求
        xhr.send(FormData); // 如果发送JSON数据，使用 xhr.send(jsonData);
    }
    //发送get请求
    function doGet(url) {
        var xhr = new XMLHttpRequest();
        var url="<%=basePath%>"+url;
        xhr.open("GET", url, true);         // 第三个参数为true表示异步请求
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 请求成功完成，处理响应
                var response = xhr.responseText;
                // console.log(response);
            } else {
                // 请求还在进行中，或者发生错误
                console.log("失败");
            }
        };
        xhr.send(); // 发送请求
    }




    //显示免密登录页
    function ShowCaptchaLogin() {
        // 获取 div 元素
        var pwdLogin = document.getElementById('pwd_login');
        var captchaLogin = document.getElementById('captcha_login');
        var register = document.getElementById('register');
        // 隐藏密码登录表单
        pwdLogin.style.display = 'none';
        // 显示免密登录表单
        captchaLogin.style.display = 'block';
        register.style.display = 'none';
    }
    //显示密码登录页
    function ShowPwdLogin() {
        // 获取 div 元素
        var pwdLogin = document.getElementById('pwd_login');
        var captchaLogin = document.getElementById('captcha_login');
        var register = document.getElementById('register');
        // 隐藏密码登录表单
        pwdLogin.style.display = 'block';
        // 显示免密登录表单
        captchaLogin.style.display = 'none';
        register.style.display = 'none';
    }
    //显示注册页
    function ShowRegister() {
        // 获取 div 元素
        var pwdLogin = document.getElementById('pwd_login');
        var captchaLogin = document.getElementById('captcha_login');
        var register = document.getElementById('register');
        // 隐藏密码登录表单
        pwdLogin.style.display = 'none';
        // 显示免密登录表单
        captchaLogin.style.display = 'none';
        register.style.display = 'block';
    }
    // 小眼睛显示密码
    function togglePasswordVisibility() {
        var pwd1 = document.getElementById("pwd1");
        var pwd2 = document.getElementById("pwd2");
        if (pwd1.type === "password" || pwd2.type === "password") {
            pwd1.type = 'text';
            pwd2.type = "test";
        } else {
            pwd1.type = "password";
            pwd2.type = "password";
        }
    }



</script>
</body>
</html>
